//这个配置文件，起始就是一个js文件，通过node中的模块操作 ，向外暴露了一个配置对象
const path=require('path')
//启用热更新的第二步
const webpack=require('webpack')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
//导入在内存中生成html页面的插件
//只要是插件，都一定要放到plugin节点中去
//这个插件的两个作用
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动，把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin=require('html-webpack-plugin')


//当以命令行形式运行webpack和webpack-dev-server的时候，工具会发现，我们并没有提供
//要打包的文件的入口和出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件
//就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.exports={
    //大家已经学会了举一反三，大家觉得，在配置文件中，需要手动指定入口和出口
    "mode":"none",
    "entry":path.join(__dirname,'./src/main.js'),//入口，表示，要使用webpack打包哪个文件
    "output":{
        path:path.join(__dirname,'./dist'),//指定 打包好的文件，输出到哪个目录中去
        filename:'bundle.js'//这是指定输出文件的名称
    },
    devServer:{//这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
        open:true,//自动打开浏览器
        port:3000,//设置启动时候的运行端口
        contentBase:'src',//指定托管的根目录
        hot:true//启用热更新 的第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的对象，这是启用热更新的第三步
        new htmlWebpackPlugin({//创建一个在内存中生成htnl页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定 模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'//指定生成页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//这个节点，用于配置 所有第三方模块加载器
        rules:[//所有第三方模块 的匹配规则
            { test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的loader
            {test:/\.(jpg|png|gif|bmp|jpge)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},//处理 图片路径的loader
            //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式
            //的字符串，如果 图片小于给定的limit值，则会被转为base64的字符串
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置babel来转换高级的es语法,安装失败的话要注意版本问题
            {test:/\.vue$/,use:'vue-loader'},//处理.vue文件的loader
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}
        ]

    },
    resolve:{
        alias:{//设置vue被导入的时候的包的路径
           // 'vue$':'vue/dist/vue.js'
        }
    }
}


//当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步：
//1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口
//2.webpack就会去项目的根目录中，查找一个叫做‘webpack.config.js’的配置文件
//3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
//4.当webpack拿到了配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建